<template>
	<view>


		<view class="tabbar-container row-arround">
			<view class="tabbar-item" v-for="(item,index) in tabbarList" @click="changeItem2(item)" :key="item.id">
				<view :class="[currentItem2==item.id?'selected row-center':'unseletced row-center single-line']">
					<view class="item-top">
						<image :src="currentItem2==item.id?item.selectedIconPath:item.iconPath"></image>
					</view>
					<view class="item-bottom" :class="[currentItem2==item.id ? 'item-active' : '']">
						<text>{{item.text}}</text>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentItem2: {
				type: Number,
				default: 0
			},
			// keys: {
			// 	type: Number,
			// 	default: 0
			// },
		},
		data() {
			return {
				show: false,
				// currentItem2: 0,
				tabbarList: [{
						id: 0,
						pagePath: "/src/pages/index/index",
						"iconPath": "/static/images/home_n.png",
						"selectedIconPath": "/static/images/home_y.png",
						text: "首页",
						centerItem: false
					},
					{
						id: 1,
						pagePath: "/src/pages/sign/index",
						"iconPath": "/static/images/sign_n.png",
						"selectedIconPath": "/static/images/sign_y.png",
						text: "已报名活动",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "/src/pages/my/index",
						"iconPath": "/static/images/my_n.png",
						"selectedIconPath": "/static/images/my_y.png",
						"text": "我的",
						centerItem: false
					}
				]

			};
		},
		mounted() {
			// this.currentItem2 = this.key;
			uni.hideTabBar();
		},

		onShow() {},

		methods: {
			sonclick(item) {
				console.log('sonclicksonclick', this.currentItem2)
			},
			changeItem2(item) {

				let _this = this;
				// this.currentItem2 = item.id;
				uni.switchTab({
					url: item.pagePath
				});

				console.log(item.pagePath)


			}
		}
	}
</script>
<style scoped lang="scss">
	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(180deg, #FAB5CB 0%, #FF96AC 100%);
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		z-index: 1200;
	}

	.tabbar-container .tabbar-item {
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .item-active {
		color: #298AFD;
	}

	.tabbar-container .big-item {
		display: block;
		position: relative;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.selected {
		padding: 22rpx 30rpx;
		display: flex;
		height: 92rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx -8rpx 16rpx 0rpx #FE92BF;
		border-radius: 46rpx;
		border: 4rpx solid;
		border-image: linear-gradient(180deg, rgba(250, 181, 203, 1), rgba(250, 181, 203, 1)) 0 0;
	}

	.unseletced {
		padding: 22rpx 30rpx;
		height: 92rpx;
		background: #FDD5E0;
		border-radius: 46rpx;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 48rpx;
		height: 48rpx;
		padding: 0rpx;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -50rpx;
		left: calc(50% - 50rpx);
		border-radius: 50%;
		box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
		/* box-shadow: 0 0 5px #999;  */
		background-color: #ffffff;
		padding: 10rpx;
	}

	.tabbar-container .big-item .item-top {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		margin: 0 auto;
		top: 0rpx;
		border-radius: 50%;
		background-color: #ffffff;

	}

	.tabbar-container .tabbar-item .item-top image {
		width: 48rpx;
		height: 48rpx;
	}

	tabbar-container .tabbar-item:nth-child(3) .item-top image {
		background: #ff0000;
	}

	.tabbar-container .tabbar-item .item-bottom {
		margin-left: 10rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #BF7A8E;
		line-height: 44rpx;
	}

	.tabbar-container .tabbar-item .item-active {
		margin-left: 10rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FF5280;
		line-height: 44rpx;
	}
</style>